<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<!--让IE开启它的兼容模式-->
		<meta http-equiv='X-UA-Compatible' content='IE-edge'>
	    <!--让手机的屏幕端口正常显示-->
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">		
		<title>index page</title>
		<!-- Bootstrap -->
		<link rel="stylesheet" href="./css/bootstrap.min.css">
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="./js/jquery-1.10.2.min.js"></script>
		
		<script src="./js/bootstrap.min.js"></script>
		
		<script type="text/javascript" src="./js/index.js"></script>
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<style type='text/css'>
			/* body{
				background: url(img/bg3.jpg) no-repeat; 
				background-size: 100%;
			} */
			.block{
				width:100%;
				height:300px;
				border: 2px solid gray;	
				margin-bottom: 40px;
				color: #555555;
				background-color: white;
				
			}
			a{
				text-decoration: none;
			}
			.right-block1{
				
				height: 420px;
				border: 2px solid lightgray;
				background-color: white;
			}
			.profile{
				height: 120px;
				width: 120px;
				border: 1px solid #000000;
				border-radius: 50%;
				margin-top: 50px;
				background: url(img/profile1.jpeg);
			}
			table tr td{
				border-right: 1px solid darkgray;
				text-align: center;
				padding: 4px;
			}
			.profile, .signature, {
				margin: 2px;
			}
			.other-info{
				margin: 8px;
			}
			.paragraph-title, .descr{
				color: #555555;
			}
			.details{
				color: #555555;
				padding: 6px;
				border: 1px solid #000000;
			}
			.addOverclass{
				/* border: 1px solid red; */
				box-shadow: 0px 3px 2px 0px #888888 inset;				
			}
			.addOutclass{
				/* border: 1px solid #5CB85C; */
				box-shadow: 0px 0px 0px 0px #888888 inset;	
			}

			
			
		</style>
		<script>
			window.onload=function(){
				// $('.block').mouseover(function(){
				//     $(this).css('box-shadow','0px 0px 2px 1px #555555 inset')
				// });
				// $('.block').mouseout(function(){
				//     $(this).css('box-shadow','0px 0px 0px 0px #555555 inset')
				// });
				// $('.right-block1').mouseover(function(){
				// 	$(this).css('box-shadow','0px 0px 2px 1px #555555 inset')
					
				// });
				// $('.right-block1').mouseout(function(){
				//     $(this).css('box-shadow','0px 0px 0px 0px #555555 inset')
				// })
				
				// $('.details').mouseover(function(){
				// 	$(this).css('background-color','#000000')
				// 	$(this).css('color','white')
				// })
				// $('.details').mouseout(function(){
				// 	$(this).css('background-color','white')
				// 	$(this).css('color','#555555')
				// })
				// $('a').mouseover(function(){
				// 	$(this).css('text-decoration','none')
				// })
				// $('.paragraph-title').mouseover(function(){
				// 	$(this).css('text-decoration','underline')
				// })
				// $('.paragraph-title').mouseout(function(){
				// 	$(this).css('text-decoration','none')
				// })
				// $('.bg').click(function(){
				// 	var i =Math.ceil((Math.random())*10)
					
				// 	var b ='url(img/bg'+i+'.jpg) no-repeat'
				// 	// alert(b)
				// 	// alert(typeof(b))
				// 	$(this).css('background',b)
				// 	$(this).css('background-size','100%')
				// })
				
				var homepage = new Vue({
					el: '#homepage',
					data:{
						dataList:[
							{
							title:'first title'	,
							time:'2019-10-1',
							language:'java',
							descri:'first paragraph'
							},{
							title:'second title'	,
							time:'2019-10-2',
							language:'c',
							descri:'second paragraph'	
							},{
							title:'third title'	,
							time:'2019-10-3',
							language:'c++',
							descri:'third paragraph'	
							},{
							title:'fourth title'	,
							time:'2019-10-4',
							language:'python',
							descri:'forth paragraph'	
							}
							],
							active:-1,
							bgIndex:1,
							test:''
							
					},
					
					methods:{
						over:function(indexnum){
							this.active = indexnum
							console.log(indexnum)
						},
						out:function(indexnum){
							this.active = -1
							
						},
						
							
						
						
					}
				})
				
				var rightblock = new Vue({
					el: '#right-block',
					data:{
							imgUrl:'./img/cut.png',
							userSignature:'yes',
							userPostNum:'1',
							Catagories:'2',
							tags:'3',
							userName:'yeah'	,
							change:0
					},
					methods:{
						rightOver:function(){
							this.change=1
						},
						rightOut: function(){
							this.change=0
						}
					}
				})

			}		
		</script>
		
		
	</head>
	<body>
		<div class="row">
		  <!--left view-->
		  <div class="col-xs-10 col-md-7 col-md-offset-1 col-xs-offset-1" id='homepage'>
			  
			<div class="block" v-for="(item, index) in dataList" :class="active == index?'addOverclass':'addOutClass'" @mouseover="over(index)" @mouseout="out(index)">
			
				<a href='./detail.html'>
					<div class="paragraph-title">
						<center><h3>{{ item.title }} {{ index }}</h3></center>
					</div>
				</a>
				
				<center>
					<div>
					<span class="glyphicon glyphicon-calendar" style="color: #A2A2A2;">Posted on&nbsp;</span><span style="border-bottom: 1px dotted #000000; ">{{ item.time }}</span> &nbsp;|&nbsp;
					<span class="glyphicon glyphicon-file" style="color: #A2A2A2;">In</span>
					<span style="text-decoration: underline">{{ item.language }}</span>
					</div>
				</center>	
				
				<center class="descr">
					<div style="margin-top: 68px;">
						<h4>
							{{item.descri}}
						</h4>
					</div>

				<div class="change" style="margin-top: 45px;">
					<a href='./detail.html'><span  class="details"> Read more>></span></a>
					
				</div>
				</center>
			</div>
			<div class="bottom">
				<div class="showPage">
					
				</div>
				<div class="addParagraph">
					<a href="./add.html"><button type="button">add blog</button></a>
				</div>
			</div>
			

		  </div>
		  <!--right view-->
		  <div class="col-md-3 visible-md visible-lg" id='right-block'>
			<div class="right-block1" :class="change==1?'addOverclass':'addOutclass'" @mouseover="rightOver" @mouseout="rightOut">
				<center>
					<div class="profile"></div>
					<div class="signature">
						{{ userSignature }}
					</div>
					<div class="other-info">
						<table>
							<tr>
								<td>{{ userPostNum }}</td>
								<td>{{ Catagories }}</td>
								<td style="border-right: none;">{{ tags }}</td>
							</tr>
							<tr>
								<td><strong>Posts</strong></td>
								<td><strong>Catagories</strong></td>
								<td style="border-right: none;"><strong>Tags</strong></td>
							</tr>
						</table>						
					</div>
					
					<img :src="imgUrl" />
					<div class="username"><a>{{ userName }}{{ change }}</a></div>
				</center>
			</div>
			<div class="col-md-1 visible-md visible-lg">
		  </div>
		  
		  
		  
		</div>
		
	<script id="ribbon" src="js/canvas-ribbon.js"></script>	
	</body>
		
</html>
